<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/animate.tools.js"></script>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-color: black;
        }
    </style>
</head>

<body>

    <script>

        function CreateBiu(x, y = document.documentElement.clientHeight) {
            this.el = document.createElement("div");
            document.body.appendChild(this.el);
            this.el.style.position = "absolute";
            this.el.style.borderRadius="50%"
            this.el.style.height = "10px";
            this.el.style.width = "10px";
            this.el.style.backgroundColor = this.randomColor();
            this.el.style.left = x + "px";
            this.el.style.top = y + "px";

        }

        CreateBiu.prototype.randomColor = function () {
            var str = "rgb(";
            str += parseInt(Math.random() * 256) + ",";
            str += parseInt(Math.random() * 256) + ",";
            str += parseInt(Math.random() * 256) + ")";

            return str;
        }
        CreateBiu.prototype.fly = function (top,callback) {
            let self = this;
            $.animate(this.el, { top }, function () {
                self.el.remove();
                if (callback) {
                    callback();
                }
            })
        }

        function CreateBoom(x, y) {
            this.el = document.createElement("div");
            document.body.appendChild(this.el);
            this.el.style.position = "absolute";
            this.el.style.borderRadius="50%";
            this.el.style.height = "10px";
            this.el.style.width = "10px";
            this.el.style.backgroundColor = this.randomColor();
            this.el.style.left = x + "px";
            this.el.style.top = y + "px";
        }
        CreateBoom.prototype.randomColor = function () {
            var str = "rgb(";
            str += parseInt(Math.random() * 256) + ",";
            str += parseInt(Math.random() * 256) + ",";
            str += parseInt(Math.random() * 256) + ")";

            return str;
        }
        CreateBoom.prototype.fly = function () {
            var x = parseInt(Math.random() * 21) * (Math.random() > 0.5 ? 1 : -1)
            var y = parseInt(Math.random() * 21) * (Math.random() > 0.5 ? 1 : -1);
            this.timer = setInterval(() => {
                y++;
                this.el.style.left = this.el.offsetLeft + x + "px";
                this.el.style.top = this.el.offsetTop + y + "px";
                if (this.el.offsetLeft <= 0
                    || this.el.offsetLeft >= document.documentElement.clientWidth
                    || this.el.offsetTop >= document.documentElement.clientHeight) {
                    clearInterval(this.timer);
                    this.el.remove();

                }
            }, 40);
        }


        document.onclick = function (evt) {
            var e = evt || window.event;
            new CreateBiu(e.pageX).fly(e.pageY, () => {
                for (var i = 0; i < 10; i++) {
                    new CreateBoom(e.pageX, e.pageY).fly();
                }
            });
        }

    </script>



</body>

</html>